<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<head>
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
	<%@include file="../common/css.jsp"%>
		<%@include file="../common/jspcommon.jsp"%>
		  <%@include file="../common/mjs.jsp"%>
    <link type="text/css" href="/css/style_member.css" rel="stylesheet" />
    <link type="text/css" href="/css/style_auction.css" rel="stylesheet" />
    <script type="text/javascript" src="/js/jquery.blockUI.js?v2.31"></script>
    <script type="text/javascript" src="/js/seadragon.min.js"></script>
    <title>拍卖-笔飞美术作品</title>
</head>
<body>
    <script type="text/javascript">
		//<![CDATA[
        var responseJson = "";

        function ClearWidget() {

            var widget = $("div#art-object-fullscreen");
            var navDiv = $(widget.find("div.overlay-header div.art-object"));
            var footer = $(widget.find("div.overlay-footer div.text-box"));
            var navInfo = $(navDiv.find("ul.navigation li:eq(1)"));
            var navPrev = $(navDiv.find("ul.navigation li:eq(0)"));
            var navNext = $(navDiv.find("ul.navigation li:eq(2)"));
            var seadragonDiv = $("div#seadragon-container");
            var downloadLink = $("li.download");

            //clear the pagination elements
            if (!navDiv.hasClass('hide-content'))
                navDiv.addClass('hide-content');

            if (!navPrev.hasClass('hide-content'))
             navPrev.addClass('hide-content');

            if (!navNext.hasClass('hide-content'))
                navNext.addClass('hide-content');

            //Set the viewport size
            seadragonDiv
                .width($(window).width())
                .height($(window).height() - $("div.overlay-footer").height() - $("div.overlay-header").height())
                .css({ "margin-top": $("div.overlay-header").height() });

            // clear the viewport contents
            seadragonDiv.html('');

            //clear the containers
            footer.html('');

            if (downloadLink.length > 0) {
                downloadLink.remove();
            }
        }

        function SetPagination() {

            var widget = $("div#art-object-fullscreen");
            var navDiv = $(widget.find("div.overlay-header div.art-object"));
            var footer = $(widget.find("div.overlay-footer div.text-box"));
            var navInfo = $(navDiv.find("ul.navigation li:eq(1)"));
            var navPrev = $(navDiv.find("ul.navigation li:eq(0)"));
            var navNext = $(navDiv.find("ul.navigation li:eq(2)"));
            var seadragonDiv = $("div#seadragon-container");
            var downloadLink = $("li.download");

            if (responseJson.PaginationExists) {

                //Set the pagination information text
                navInfo.html("<strong>" + responseJson.PaginationPos + "</strong> of <strong>" + responseJson.PaginationTotal + "</strong>");
                navDiv.removeClass("hide-content");

                if (responseJson.PaginationSearchText != null)
                    navInfo.append(responseJson.PaginationSearchText);

                //Set the handler for the prev button

                if (responseJson.PaginationPrevUrl != null) {
                    navPrev.removeClass('hide-content');
                    navPrev.unbind("click").bind("click", function () {
                        event.preventDefault();
                        //ClearWidget();
                        //Ajax call to fetch descriptor information
                        $.getJSON(responseJson.PaginationPrevUrl, function (data) {
                            responseJson = data;
                            SetPagination();
                            SetViewport();
                            SetFooter();
                        });
                    });
                }
                else {
                    navPrev.addClass('hide-content');
                }

                //Set the handler for the next button

                if (responseJson.PaginationNextUrl != null) {
                    navNext.removeClass('hide-content');
                    navNext.unbind("click").bind("click", function (event) {
                        event.preventDefault();
                        //ClearWidget();
                        //Ajax call to fetch descriptor information
                        $.getJSON(responseJson.PaginationNextUrl, function (data) {
                            responseJson = data;
                            SetPagination();
                            SetViewport();
                            SetFooter();
                        });

                    });
                }
                else {
                    navNext.addClass('hide-content');
                }
            }
            else {
                if (!navDiv.hasClass('hide-content'))
                    navDiv.addClass('hide-content');
            }
        }

        function SetViewport() {

            var widget = $("div#art-object-fullscreen");
            var navDiv = $(widget.find("div.overlay-header div.art-object"));
            var footer = $(widget.find("div.overlay-footer div.text-box"));
            var navInfo = $(navDiv.find("ul.navigation li:eq(1)"));
            var navPrev = $(navDiv.find("ul.navigation li:eq(0)"));
            var navNext = $(navDiv.find("ul.navigation li:eq(2)"));
            var seadragonDiv = $("div#seadragon-container");
            var downloadLink = $("li.download");

            //Set the viewport size
            seadragonDiv
                .width($(window).width())
                .height($(window).height() - $("div.overlay-footer").height() - $("div.overlay-header").height())
                .css({ "margin-top": $("div.overlay-header").height() });

            // clear the viewport contents
            seadragonDiv.html('');

            if (responseJson.ImageDescriptor != undefined) {
                var viewer  = new Seadragon.Viewer('seadragon-container');
                viewer.clearControls();
                viewer.openDzi(responseJson.ImageUrl, responseJson.ImageDescriptor);
                viewer.addControl(makeZoom(viewer, "Zoom In", "zoom-inn", Seadragon.Config.zoomPerScroll / 1),
                					Seadragon.ControlAnchor.TOP_LEFT);

                viewer.addControl(makeZoom(viewer, "Zoom Out", "zoom-outt", 1 / Seadragon.Config.zoomPerScroll),
                					Seadragon.ControlAnchor.TOP_LEFT);

                // Add zoom out button
                viewer.addControl(makeReset(viewer, "Reset", "go-homee"),
                					Seadragon.ControlAnchor.TOP_LEFT);
                
            }
            else {
                seadragonDiv.append("<img src=\"" + responseJson.ImageUrl + "\" alt=\"" + responseJson.Title + "\"  class=\"max-dims\" />");
            }
        }

        // Add zoom control
        function makeReset(viewer, labelText, className) {
            var control = document.createElement("a");
            var controlText = document.createTextNode(labelText);

            control.href = "#";  // so browser shows it as link
            control.className = className;
            control.title = labelText;
            control.appendChild(controlText);



            Seadragon.Utils.addEvent(control, "click", function (event) {
                Seadragon.Utils.cancelEvent(event);
                // don't process link

                if (!viewer.isOpen()) {
                    return;
                }

                viewer.viewport.goHome();
            });
            return control;
        }

        // Add zoom control
        function makeZoom(viewer, labelText, className, zoom) {
            var control = document.createElement("a");
            var controlText = document.createTextNode(labelText);

            control.href = "#";  // so browser shows it as link
            control.className = className;
            control.title = labelText;
            control.appendChild(controlText);

            Seadragon.Utils.addEvent(control, "click", function (event) {
                Seadragon.Utils.cancelEvent(event);
                // don't process link

                if (!viewer.isOpen()) {
                    return;
                }

                viewer.viewport.zoomBy(zoom);
                viewer.viewport.ensureVisible();
            });
            return control;
        }

        function SetFooter() {

            var widget = $("div#art-object-fullscreen");
            var navDiv = $(widget.find("div.overlay-header div.art-object"));
            var footer = $(widget.find("div.overlay-footer div.text-box"));
            var navInfo = $(navDiv.find("ul.navigation li:eq(1)"));
            var navPrev = $(navDiv.find("ul.navigation li:eq(0)"));
            var navNext = $(navDiv.find("ul.navigation li:eq(2)"));
            var seadragonDiv = $("div#seadragon-container");
            var downloadLink = $("li.download");

            //clear the containers
            footer.html('');

            if (downloadLink.length > 0) {
                downloadLink.remove();
            }

            if (responseJson.Title != undefined) {
                footer.append("<h2>" + responseJson.Title + "</h2>"); 
            }

            if (responseJson.Artist != undefined) {
                footer.append("<h3>" + responseJson.Artist + "</h3>"); 
            }

            //Set the download button
            if (responseJson.OriginalImageUrl != undefined) {
                $(widget.find("div.overlay-footer div.toolbar ul")).append("<li class=\"download\"><a href=\"" + responseJson.OriginalImageUrl + "\" title=\"Download HD image\"><span class=\"hide-content\">Download image</span></a></li>");
            }
        }

        $(document).ready(function () {
            function InitFullscreen() {

                var widget = $("div#art-object-fullscreen");
                var navDiv = $(widget.find("div.overlay-header div.art-object"));
                var footer = $(widget.find("div.overlay-footer div.text-box"));
                var navInfo = $(navDiv.find("ul.navigation li:eq(1)"));
                var navPrev = $(navDiv.find("ul.navigation li:eq(0)"));
                var navNext = $(navDiv.find("ul.navigation li:eq(2)"));
                var seadragonDiv = $("div#seadragon-container");
                var downloadLink = $("li.download");

                ClearWidget(navDiv, navPrev, navNext, seadragonDiv, footer, downloadLink);

                //Check to see if the crdid number has been specified
                var crdid = widget.find('span.artObjectZoomId').html();

                var uniqueId = $("div.slideshow span.uniqueId");
                var id = uniqueId.html();

                if (id == '' || id == null) {
                    uniqueId = $("div#browse-highlights span.uniqueId");
                    id = uniqueId.html();
                }

                queryString = '';

                if (id != '' && id != null) {
                    queryString = '&pageId=' + id;
                }

                var qStr = '';

                //get the query string and pass it into the ajax call for the search results page
                if (window.location.href.indexOf('?') > 0) {
                    qStr = '&' + window.location.href.slice(window.location.href.indexOf('?') + 1);
                }

                var sliderCounter = $('div.slider-counter span.current-slider').html();
                if (sliderCounter != null && (qStr == '' || (qStr.indexOf('&pos=') < 0 && qStr.indexOf('?pos=') < 0))) {
                    queryString += "&pos=" + sliderCounter;
                }

                if (qStr != undefined && qStr != '') {
                    queryString += qStr;
                }

                var jsonUrl = "http://www.metmuseum.org/json/zoomartobjectdescriptor/zoomartobjectdescriptor.ashx?id=" + crdid + queryString;

                //Ajax call to fetch descriptor information
                $.getJSON(jsonUrl, function (data) {
                    responseJson = data;
                    SetPagination();
                    SetViewport();
                    SetFooter();
                });
            }

            $("a.activate-overlay")
            .click(function () {
                InitFullscreen();
                return false;
            });

        });
        //]]>
    </script>
    <script type="text/javascript">
        $(function () {
            if (window.location.hash == "#fullscreen") {
                $("a.activate-overlay").click();
            }
        });
    </script>

    <div class="mask close"></div>

    <div id="art-object-fullscreen" class="overlay" style="display: block;">
        <span class="hide-content artObjectZoomId">60005042</span>
        <div class="overlay-header cleared">
            <a href="#">
                <img src="../images/logo2.jpg" class="overlay-logo" alt="">
            </a>
            <p class="close">
                <a href="#">Close</a>
            </p>
        </div>
        <div class="content-container">
            <div id="seadragon-container" class="full-size" style="width: 1325px; height: 439px; margin-top: 62px;">
                <div style="background-image: none; background-color: transparent; border: none;
                    margin: 0px; padding: 0px; position: relative; width: 100%; height: 100%; left: 0px;
                    top: 0px; text-align: left; background-position: initial initial; background-repeat: initial initial;">
                    <div style="background-image: none; background-color: transparent; border: none;
                        margin: 0px; padding: 0px; position: absolute; width: 100%; height: 100%; overflow: hidden;
                        top: 0px; left: 0px; text-align: left; background-position: initial initial;
                        background-repeat: initial initial;">
                        <div style="background-image: none; background-color: transparent; border: none;
                            margin: 0px; padding: 0px; position: absolute; width: 100%; height: 100%; background-position: initial initial;
                            background-repeat: initial initial;">
                            <img style="background-image: none; background-color: transparent; border: none;
                                margin: 0px; padding: 0px; position: absolute; -webkit-transform-origin: 0px 0px;
                                -webkit-transform: matrix(0.7174668, 0, 0, 0.71594028, 666.08733401, 270.35828477);
                                background-position: initial initial; background-repeat: initial initial;" src="http://images.metmuseum.org/CRDImages/as/zoom/DP278813_files/9/1_1.jpg"/>
                            <img style="background-image: none; background-color: transparent; border: none;
                                margin: 0px; padding: 0px; position: absolute; -webkit-transform-origin: 0px 0px;
                                -webkit-transform: matrix(0.7174668, 0, 0, 0.7174668, 666.08733401, 87.40425004);
                                background-position: initial initial; background-repeat: initial initial;" src="http://images.metmuseum.org/CRDImages/as/zoom/DP278813_files/9/1_0.jpg"/>
                            <img style="background-image: none; background-color: transparent; border: none;
                                margin: 0px; padding: 0px; position: absolute; -webkit-transform-origin: 0px 0px;
                                -webkit-transform: matrix(0.7174668, 0, 0, 0.71594028, 483.13329928, 270.35828477);
                                background-position: initial initial; background-repeat: initial initial;" src="http://images.metmuseum.org/CRDImages/as/zoom/DP278813_files/9/0_1.jpg"/>
                            <img style="background-image: none; background-color: transparent; border: none;
                                margin: 0px; padding: 0px; position: absolute; -webkit-transform-origin: 0px 0px;
                                -webkit-transform: matrix(0.7174668, 0, 0, 0.7174668, 483.13329928, 87.40425004);
                                background-position: initial initial; background-repeat: initial initial;" src="http://images.metmuseum.org/CRDImages/as/zoom/DP278813_files/9/0_0.jpg"/>
                        </div>
                    </div>
                    <div style="background-image: none; background-color: transparent; border: none;
                        margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; background-position: initial initial;
                        background-repeat: initial initial;">
                        <span style="background-image: none; background-color: transparent; border: none;
                            margin: 0px; padding: 0px; position: static; display: inline-block; background-position: initial initial;
                            background-repeat: initial initial;"><a href="#" class="zoom-inn" title="Zoom In"
                                style="position: relative;">Zoom In</a></span><span style="background-image: none;
                                    background-color: transparent; border: none; margin: 0px; padding: 0px; position: static;
                                    display: inline-block; background-position: initial initial; background-repeat: initial initial;"><a
                                        href="#" class="zoom-outt" title="Zoom Out" style="position: relative;">Zoom Out</a></span><span
                                            style="background-image: none; background-color: transparent; border: none; margin: 0px;
                                            padding: 0px; position: static; display: inline-block; background-position: initial initial;
                                            background-repeat: initial initial;"><a href="#" class="go-homee" title="Reset" style="position: relative;">Reset</a></span>
                    </div>
                    <div style="background-image: none; background-color: transparent; border: none;
                        margin: 0px; padding: 0px; position: absolute; top: 0px; right: 0px; background-position: initial initial;
                        background-repeat: initial initial;">
                    </div>
                    <div style="background-image: none; background-color: transparent; border: none;
                        margin: 0px; padding: 0px; position: absolute; right: 0px; bottom: 0px; background-position: initial initial;
                        background-repeat: initial initial;">
                    </div>
                    <div style="background-image: none; background-color: transparent; border: none;
                        margin: 0px; padding: 0px; position: absolute; left: 0px; bottom: 0px; background-position: initial initial;
                        background-repeat: initial initial;">
                    </div>
                </div>
            </div>
        </div>
        <div class="overlay-footer cleared">
            <div class="text-box">
                <h2>
                    沈阳大学美术学院中国画系教授禹称作品</h2>
            </div>
            <div class="toolbar">
                <ul>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>

</body>
</html>
